<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2020/11/11
  Time: 17:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
<html>
<head>
    <title>房间设施</title>
</head>
<body>
<div class="layui-form-item">
    <%--增加按钮--%>
    <button type="button" class="layui-btn" id="addbtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <div class="layui-inline">
        <label class="layui-form-label">房间号</label>
        <div class="layui-input-inline">
            <input type="text" id="sroomcode" name="sroomcode" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">设施名称</label>
        <div class="layui-input-inline">
            <input type="text" id="sfname" name="sfname" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--检索按钮--%>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-warm" id="search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="over">重置</button>
        </div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
</script>

<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form=layui.form;

        table.render({
            elem: '#test' //id为test的table
            ,url:'${pageContext.request.contextPath}/selectRoomFac'   //url 查询数据   所有的客户的数据
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '房间设施表'
            //data[{ id:12,name:123}]
            ,cols: [[
                {field:'id', title:'ID',fixed: 'left',  sort: true}
                ,{field:'roomcode', title:'房间id'}
                ,{field:'fname', title:'设施id',}
                ,{field:'rs', title:'状态',  sort: false,templet: function(res){
                        //res  这一行的内容
                        var f=res.rs;//状态值
                        if(f==0){
                            //正常
                            return "正常";
                        }else{
                            return "禁用";
                        }
                    }
                }
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,page: true
        });
        //添加按钮弹出事件
        $("#addbtn").click(function () {
            $('#addform')[0].reset();
            $("#FJH").empty();
            $("#SSMC").empty();
            display();
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    title:'新增房间设施'
                    ,type: 1
                    ,content: $("#add")
                    ,offset: '100px'
                    ,moveOut:true
                    ,area: ['460px', '350px']
                });
            })
        });

        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "${pageContext.request.contextPath}/delRoomFac",
                        data:data,
                        success:function(r){
                                //弹出删除成功
                                layer.msg("删除成功！！！");
                                //刷新table
                                layer.close(index);
                                table.reload("test",{
                                    page:{
                                        //从第一页开始加载
                                        curr:1
                                    }
                                })
                        },error:function (r) {
                            alert(JSON.stringify(r))
                        }
                    });
                    layer.close(index);
                    return false;
                });
            } else if(obj.event === 'edit'){
                $("#FJH").empty();
                $("#SSMC").empty();
                display();
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.open({
                        title:'修改信息'
                        ,type: 1
                        ,content:$('#add')
                        ,offset: '100px'
                        ,moveOut:true
                        ,area: ['500px', '450px']

                    });
                    form.val('add', {
                        "id": data.id // "name": "value"
                        ,"roomid": data.roomid
                        ,"facilityid": data.facilityid
                        ,"rs": data.rs
                    });
                })
            }
        });

        form.on('submit(demo11)',function (data) {
            $.ajax({
                url:"/Hotel/addAndUpdRF",
                data:data.field,
                success:function(){
                    layer.closeAll();
                    table.reload("test");
                    $('#addform')[0].reset();
                    form.render();
                },
                error:function () {
                    layer.closeAll();
                    alert("操作失败");
                }
            });
            return false;
        });

        function display(){
            //房间号码下拉框填充
            $.ajax({
                url:'${pageContext.request.contextPath}/selectrid'
                ,data:{}
                ,type:'post'
                ,async:false
                ,dateType:'json'
                ,success:function (data) {
                    var option = '';
                    for(var i = 0 ; i < data.length; i++){
                        option += '<option value="'+data[i].id+'">'+data[i].roomcode+'</option>'
                    }
                    $("#FJH").append(option);
                }
                ,error:function(data) {
                    alert("错误");
                }
            });
            //设施名称下拉框填充
            $.ajax({
                url:'${pageContext.request.contextPath}/selectFname'
                ,data:{}
                ,type:'post'
                ,async: false
                ,dateType:'json'
                ,success:function (data) {
                    var option = '';
                    for(var i = 0 ; i < data.length; i++){
                        option += '<option value="'+data[i].id+'">'+data[i].name+'</option>'
                    }
                    $("#SSMC").append(option);
                }
                ,error:function(data) {
                    alert("错误");
                }
            })
        }
        $("#search").click(function () {
            var sroomcode = $("#sroomcode").val();
            var sfname = $("#sfname").val();
            table.reload('test', {
                method: 'post'
                , where: {
                    sroomcode: sroomcode,
                    sfname:sfname
                }
                , page: {
                    curr: 1
                }
            })
        });
        $("#over").click(function () {
            window.location.reload();
        })
    });
</script>

<div class="layui-row" id="add" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" style="margin-top:20px" lay-filter="add" id="addform" >
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text"  name="id"   autocomplete="off"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间号</label>
                <div class="layui-input-block">
                    <select name="roomid" id="FJH">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设施名称</label>
                <div class="layui-input-block">
                    <select name="facilityid" id="SSMC">
                    </select>
                </div>
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="rs">
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                </select>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
